<template>
  <div>
    <el-upload
      :value="value"
      :names="names"
      :action="uploadPath"
      :headers="headers"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="defaultSuccess"
      :accept="accept"
      :file-list="fileList"
      show-file-list
      list-type="picture-card">
      <i class="el-icon-plus"/>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { uploadPath } from '@/api/storage'
export default {
  name: 'Upload',
  props: {
    limit: {
      type: Number,
      default: 1
    },
    data: {
      type: Object,
      default: function() {
        return {}
      }
    },
    names: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    accept: {
      type: String,
      default: '.jpg,.jpeg,.png,.gif'
    }
  },
  data() {
    return {
      uploadPath,
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.fileList = [{ name: 'food.jpeg', url: this.value }]
  },
  methods: {
    defaultSuccess: function(res, file, fileList) {
      console.log(res)
      debugger
      if (res.code === 0) {
        this.fileList = [{ name: res.data.name, url: res.data.url }]
        // this.initData(res.data);
        // this.fileInfoData.push(res.data[0])
        // this.uploadFileInfoData.push(res.data[0])
        this.$message.success('上传成功!')
        this.dialogImageUrl = res.data.url
        // this.$emit(this.names, res.data)
      } else {
        // this.handleRemove(file, fileList);
        this.$message.error(res.msg)
      }
    },
    /* defaultSuccess: function(response) {
      this.dataForm.idCardImgFront = response.data.url
    },*/
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    }
  }
}
</script>
